<%--
  Created by IntelliJ IDEA.
  User: LJX
  Date: 2019/9/26
  Time: 8:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心--个人信息设置</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/adopt/indexCss.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/adopt/adoptCatCss.css" type="text/css">
    <style>

        .milder td {
            border: 1px solid lightgrey;
            padding: 10px;
        }
        td {
            width: 100px;
        }


    </style>
</head>
<body>
<jsp:include page="../common/nav.jsp"></jsp:include>

<div class="layui-row">
    <jsp:include page="personalcenter.jsp"></jsp:include>

        <div class="layui-col-md6  layui-col-lg-offset5" style="margin-top:-350px; background-color: white;">



            <div class="layui-tab " lay-filter="docDemoTabBrief">

                <ul class="layui-tab-title">
                    <li class="layui-this">全部付款</li><span class="layui-badge">6</span>
                    <li>已付款</li>
                    <li>未付款</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <blockquote class="" style="background-color: white;">
                            <div class="layui-text">
                                <div class="container" style="margin-top:10px;">
                                    <table>
                                        <tr>
                                            <td>猫咪</td>
                                            <td>种类</td>
                                            <td>数量</td>
                                            <td>售后</td>
                                            <td>订单金额</td>
                                            <td>交易状态</td>
                                            <td>操作</td>
                                        </tr>

                                        <!-- 所有合并的列----开始 -->
                                        <tr>
                                            <td colspan="7" style="height:10px;"></td>
                                        </tr>


                                        <tr>
                                            <td colspan="7">
                                                <br>
                                                <input type="checkbox" value="" id="cks" onclick="selectAll(this)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全选
                                                <button type="button" onclick='removeAnyLine()'><a>删除选中编号</a></button>
                                                <!-- <a>删除选中编号</a> -->
                                                <a>批量确认收货</a>
                                            </td>
                                        </tr>
                                    </table>


                                    <!-- 列的合并---结束 -->
                                    <div class="milder">
                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="<%=request.getContextPath()%>/imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td> <a href="personal-center-myorder-details.html">-</a></td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>


                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="<%=request.getContextPath()%>/imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="<%=request.getContextPath()%>/imgs/24.jpg style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="<%=request.getContextPath()%>/imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>未付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </blockquote>
                    </div>

                    <div class="layui-tab-item">


                        <blockquote class="layui-elem-quote" style="background-color: white;">
                            <div class="layui-text">
                                <div class="container" style="margin-top:10px;">


                                    <!-- <div class="row">
                                        <div class="col-md-12"> -->
                                    <table>
                                        <tr>
                                            <td>猫咪</td>
                                            <td>种类</td>
                                            <td>数量</td>
                                            <td>售后</td>
                                            <td>订单金额</td>
                                            <td>交易状态</td>
                                            <td>操作</td>
                                        </tr>
                                        <!-- 所有合并的列----开始 -->
                                        <tr>
                                            <td colspan="7" style="height:10px;"></td>
                                        </tr>

                                        <tr>
                                            <td colspan="7">
                                                <input type="checkbox" value="" id="cks" onclick="selectAll(this)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全选
                                                <button type="button" onclick="removeAnyLine()"><a>删除选中编号</a></button>
                                                <!-- <a>删除选中编号</a> -->
                                                <a>批量确认收货</a>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- 列的合并---结束 -->
                                    <div class="milder">
                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>


                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>已付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>


                        </blockquote>

                    </div>
                    <div class="layui-tab-item">
                        <blockquote class="layui-elem-quote" style="background-color: white;">
                            <div class="layui-text">
                                <div class="container" style="margin-top:10px;">


                                    <!-- <div class="row">
                                        <div class="col-md-12"> -->
                                    <table>
                                        <tr>
                                            <td>猫咪</td>
                                            <td>种类</td>
                                            <td>数量</td>
                                            <td>售后</td>
                                            <td>订单金额</td>
                                            <td>交易状态</td>
                                            <td>操作</td>
                                        </tr>
                                        <!-- 所有合并的列----开始 -->
                                        <tr>
                                            <td colspan="7" style="height:10px;"></td>
                                        </tr>

                                        <tr>
                                            <td colspan="7">
                                                <input type="checkbox" value="" id="cks" onclick="selectAll(this)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全选
                                                <button type="button" onclick="removeAnyLine()"><a>删除选中编号</a></button>
                                                <!-- <a>删除选中编号</a> -->
                                                <a>批量确认收货</a>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- 列的合并---结束 -->
                                    <div class="milder">
                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>未付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>


                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>未付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>未付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>

                                        <table>
                                            <tr>
                                                <td colspan="7">
                                                    <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span>订单编号:123456</span>
                                                    <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                                                <td>小猫咪</td>
                                                <td>1</td>
                                                <td>-</td>
                                                <td>387$</td>
                                                <td>未付款<br>
                                                    <a>订单详情</a>
                                                </td>
                                                <td>取消订单</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </blockquote>


                    </div>
                </div>
            </div>

        </div>
</div>
<jsp:include page="../common/bottom.jsp"></jsp:include>
<script>
    function selectAll(obj) {
        //获取内容行所有的checkbox
        var cks = document.getElementsByName("ck");

        if (obj.checked) {
            //遍历所有的cks
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = true;
            }
        } else {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = false;
            }
        }
    }

    // //删除任意行
    function removeAnyLine() {
        //找出勾选的行
        var cks = document.getElementsByName("ck");

        //定义一个计数器
        var count = 0;

        for (var i = 0; i < cks.length; i++) {
            // 判断checkbox是否勾选
            if (cks[i].checked) {
                count++;
            }
        }

        if (count == 0) {
            alert("请您先勾选!");
            return;
        }

        //说明已经勾选了
        var flag = confirm("确定删除吗?");

        if (flag) {

            //下标 - 删除 - 保险操作 - 倒过来.
            for (var i = cks.length - 1; i >= 0; i--) {
                if (cks[i].checked) {
                    //从tbody中剔除cks[i]所在的行tr
                    var tbody = cks[i].parentElement.parentElement.parentElement;
                    //删除tr
                    tbody.remove();
                }
            }

        }
    }
</script>
<script src="<%=request.getContextPath()%>/plugins/layui/layui.js" charset="utf-8"></script>
<script src="<%=request.getContextPath()%>/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/plugins/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element;
    });
</script>
</body>
</html>
